<template>
  <div>
    <ViewMune v-if="!haveList">
      <div class="shopping-cart">
        <div class="cart-img">
          <img src="@/assets/img/Vector.png">
        </div>
        <div class="content-text">
          NO Add-ons
        </div>
        <div class="product-button">
          <PublicButton my-width="260px" my-height="40px" content="Viewe Products"></PublicButton>
        </div>
      </div>
    </ViewMune>
    <ViewMune class="shopping-box" v-if="haveList">
      <div class="product-list">
        <div class="list-box">
          <div class="list-cart" v-for="item in shoppingCards" :key="item.id">
            <div class="picture-frame">
              <img :src=item.img>
            </div>
            <div class="product-card">
              <div class="product-fork">
                <div class="product-name">
                  {{ item.title }}
                </div>
                <div class="fork-box">
                  <img src="../../assets/img/Group 6862.png" alt="">
                </div>
              </div>
              <div class="product-nums">
                X {{ item.num }}
              </div>
              <div class="price">
                <div class="new-price">${{ item.price }}</div>
                <div class="old-price" v-if="item.originalPrice">${{ item.originalPrice }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-box">
        <div class="footer-style">
          <div class="total-price-box">
            <div class="price-box">
              <div class="total-text">Total</div>
              <div class="total-price">${{ keepDecimals }}</div>
            </div>
          </div>
          <div class="fill"></div>
          <div class="footer-botton">
            <PublicButton my-width="343px" my-height="44px" content="Chekout" :had-icon="true"></PublicButton>
          </div>
        </div>
      </div>

    </ViewMune>
  </div>
</template>

<script>
import ShopHead from '@/components/common/ShopHead.vue';
import PublicButton from '@/components/button/PublicButton.vue';
import ViewMune from '@/components/common/ViewMune.vue';
import { mapState, mapActions } from 'vuex';
import {
  totalNum,
  FixedFloat
} from '@/static/basic'
export default {
  name: 'ShoppingCart',
  data() {
    return {
      myData: { myTitle: "购物车", haveIcon: false },
      haveList: true,
      totalPrice: 0,
    }
  },
  components: {
    PublicButton,
    ShopHead,
    ViewMune
  },
  methods: {
    ...mapActions({
      handlerdpdData(dispatch) {
        dispatch("shopMuneOption/handlerdpdData", this.myData)
      }
    }),

  },
  computed: {
    ...mapState({
      shoppingCards: state => state.shopMuneOption.shoppingCards
    }),
    total() {
      return totalNum(this.shoppingCards)
    },

    keepDecimals() {
      return FixedFloat(this.total, 2)
    }
  },
  mounted() {
    this.handlerdpdData()
  }
}
</script>
<style scoped>
.shopping-cart {
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: column;
  padding-top: 276px;
}

.cart-img {
  width: 44px;
  height: 40px;
  object-fit: cover;
  margin: 0 auto;
}

.content-text {
  width: 263px;
  height: 24px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0px;
  padding-top: 19.55px;
  color: rgb(12, 13, 13);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.product-button {
  display: block;
  width: 260px;
  height: 40px;
  margin: 0 auto;
  padding-top: 22.4px;
}

.shopping-box {
  width: 100%;
  height: auto;
  margin-bottom: 131px;
}

.product-list {
  display: flex;
  width: 100%;
  height: 589px;
  /* margin: 46px 18px 0px 16px; */
  margin-top: 46px;
  flex-wrap: wrap;
  overflow: scroll;
}

.product-list::-webkit-scrollbar {
  display: none;
}

.list-box {
  width: 375px;
  height: 164px;
  margin: 0 auto;
}

.list-cart {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
}

.picture-frame {
  width: 132px;
  height: 132px;
  padding-top: 16px;
  padding-left: 16px;
}

.picture-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card {
  display: flex;
  width: 185px;
  height: 156px;
  padding-top: 16px;
  padding-left: 24px;
  flex-direction: column;
}

.product-fork {
  display: flex;
  width: 100%;
  height: 40px;
}

.product-name {
  width: 160px;
  height: 100%;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  line-height: 20px;
  letter-spacing: 0px;
  color: rgb(12, 13, 13);
}

.product-nums {
  width: 25px;
  height: 15px;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  text-align: left;
  padding-top: 42px;
}

.price {
  display: flex;
  width: 187px;
  height: 24px;
  padding-top: 11px;
  align-items: center;
}

.new-price {
  display: inline;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
  color: rgb(12, 13, 13);
}

.old-price {
  display: inline;
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  line-height: 16px;
  letter-spacing: 0px;
  padding-left: 16px;
  color: rgb(152, 153, 154);
  text-decoration: line-through;
}

.fork-box {
  position: relative;
  width: 11px;
  height: 11.15px;
  left: 14px;
  top: 6.23px;
}

.fork-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.footer-box {
  position: fixed;
  /* left: 0; */
  bottom: 0;
  width: 100%;
  height: 153px;
  padding-top: 21px;
  z-index: 99;
  box-sizing: border-box;
  background-color: rgb(255, 255, 255);
  border-top: 1px solid rgba(226, 226, 226, 0.7);
}

.footer-style {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  flex-direction: column;

}

.total-price-box {
  width: 343px;
  height: 56px;
  display: flex;
  /* margin: 21px auto 0 auto; */
  border-radius: 6px;
  background-color: rgb(249, 249, 249);
  box-shadow: 0px -1px 0px rgb(234, 234, 235);
}

.price-box {
  display: flex;
  width: 311px;
  height: 24px;
  margin: auto;
  align-items: center;
  justify-content: space-between;
}


.total-text {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
  color: rgb(12, 13, 13);
}


.total-price {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: right;
  color: rgb(12, 13, 13);
}

.fill {
  width: 100%;
  height: 20px;
}

.footer-botton {
  width: 343px;
  height: 44px;
}
</style>